import React, { createContext, useState, useEffect, useRef } from 'react';
import { Toast } from 'antd-mobile'
import HeadTop from '@/components/HeadTop';
import ListItem from '@/components/ListItem';
import ModalSpare from '../_parts/ModalSpare';
import { validatenull } from "@/utils/validate";
import { listFields } from '../_parts/const';
import ApiIndex from '@/api/index'
import "./index.less"
import Loading from '@/components/Loading';

import { MyContext } from '@/context/index';
const { Provider } = MyContext

function Index ({ history }) {
    const [inputVal, setInputVal] = useState('');
    const [List, setList] = useState([]); //列表
    const [ListRow, setListRow] = useState({});
    const ModalSpareRef = useRef(null)
    const [loading, setLoading] = useState(false);

    // 搜索
    const sendHandlePressVal = (value) => {
        if (validatenull(value)) return
        setInputVal(value)
        let _value = value
        if (value.indexOf("*") != -1) {
            _value = value.split("*")[0]
        }
        
        handleDebounce(_value)
    }

    const handleDebounce = (value) => {
        ApiIndex.loadByToolCode({ toolCode: value }).then(res => {
            const result = res.data
            if (result.code == 0 && Object.keys(result.data || {})?.length) {
                let row = {
                    ...result.data,
                    stockNumber: result.data.number,
                }
                setListRow(row)
                setInputVal('')
                ModalSpareRef.current.setVisible(true)
            } else {
                Toast.show({
                    content: '暂无匹配数据',
                })
            }
        })
    }

    const getRow = (row) => {
        let hasIndex = null
        if (List.length) {
            hasIndex = List.findIndex(el => el.toolCode == row.toolCode)
        }
        if (hasIndex > -1) {
            List.splice(hasIndex, 1, {
                ...List[hasIndex],
                ...row,
                number: (Number(row.number) + Number(List[hasIndex]?.number || 0)).toString(),
            })
        } else {
            List.push(row)
        }
        setList([...List])
        ModalSpareRef.current.setVisible(false)
    }

    const handSubmit = () => {
        if (!List.length) {
            Toast.show({
                content: '请扫描条码',
            })
            return
        }

        let params = {
            department: "工程部",
            pickingType: "660215",
            itemList: List
        }
        setLoading(true)
        ApiIndex.addClaim(params).then(res => {
            setLoading(false)
            if (!res.data.code) {
                getConfirmClaimToPc(res.data.data.no)
                history.goBack(-1)
            } else {
                Toast.show({
                    content: res.data.msg,
                })
            }
        })
    }

    const getConfirmClaimToPc = (no) => {
        ApiIndex.confirmClaimToPc({ no: no }).then(res => {
            if (!res.data.code) {
                Toast.show({
                    content: '操作成功',
                })
            } else {
                Toast.show({
                    content: res.data.msg,
                })
            }
        })
    }

    return (
        <div className='page-wrapper'>
             {
                loading ? <Loading></Loading> : null
            }
            <Provider value={{ placeholderTxt: "请扫描备件条码",inputVal:inputVal }}>
                <HeadTop
                    title="快捷领用"
                    history={history}
                    search={true}
                    sendHandlePressVal={sendHandlePressVal}
                ></HeadTop>
            </Provider>
            <div className="page-body">
                {
                    List.length > 0 ?
                        List.map(el => <ListItem
                            key={el.toolCode}
                            item={el}
                            history={history}
                            listFields={listFields}
                        ></ListItem>)
                        : <div className='no-list-data'>
                            无更多数据
                        </div>
                }
            </div>
            <div className="page-footer" onClick={handSubmit}>提交</div>
            <ModalSpare
                ref={ModalSpareRef}
                modalTitle="快捷领用"
                ListRow={ListRow}
                getRow={getRow}>
            </ModalSpare>
        </div>
    );
}

export default Index;
